<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>麦知网——学问有余，可为人师</title>

<!-- Bootstrap core CSS -->
<link href="../../css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="../../css/non-responsive.css" rel="stylesheet">
<link href="../../css/font-awesome.min.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
<link href="../../css/managefriend.css" rel="stylesheet">    
<!--<link href="../../css/sco.message.css" rel="stylesheet">
<link href="../../css/scojs.css" rel="stylesheet">  -->
<script src="../../js/jquery.min.js"></script>
</head>
<body>
	{% include 'public/common/header.html' %}
<div class="container" style="margin-top:45px">
		<div class="row">
			<div class="col-xs-12">
				<div>
					<div class="tab_left pull-left">
						<ul class="nav nav-tabs">
						  <li class="active"><a href="#focus" data-toggle="tab">我关注的</a></li>
						  <li><a href="#fans" data-toggle="tab">关注我的</a></li>
						</ul>
					</div>
					
					<div class="clearfix"></div>
				</div>
<!-- Tab panes -->
				<div class="tab-content">
<!-- 我关注的 标签第一签 -->
					<div class="tab-pane active" id="focus">
						<table class="table table-hover">
							<thead>
								<tr>
									<th class="th1">用户</th>
									<th class="th2">职业</th>
									<th class="th3">性别</th>
									<th class="th4">所在地</th>
									<th class="th5">操作</th>
								</tr>
							</thead>
							<tbody>
								{% for m in myfollow %}
								<tr>
									<td class="td_name">
										<span class="name_span1"><img src="{{m.domain}}/{{m.img}}" width="50px"/></span>
										<span class="name_span2">{{m.user_name}}</span>
									</td>
									<td style="padding-top:20px;">{{m.work}}</td>
									<td style="padding-top:20px;">
										{% ifequal 1 m.sex %}男{% endifequal %}
										{% ifequal 2 m.sex %}女{% endifequal %}
									</td>
									<td style="padding-top:20px;">{{m.position}}</td>
									<td style="padding-top:20px;">
										<a href="{% url 'users:home' m.user_id %}">查看</a>&nbsp;&nbsp;
										<span id="cancel{{m.user_id}}"><a href="javascript:void(0)" onclick="cancelfocus({{m.user_id}});">取消关注</a></span>
									</td>
								</tr>
								{% endfor %}
							</tbody>
						</table>
					</div>
<!-- 关注我的 标签第二签 -->
					<div class="tab-pane" id="fans">
						<table class="table table-hover">
							<thead>
								<tr>
									<th class="th1">用户</th>
									<th class="th2">职业</th>
									<th class="th3">性别</th>
									<th class="th4">所在地</th>
									<th class="th5">操作</th>
								</tr>
							</thead>
							<tbody>
								{% for f in follow_me %}
								<tr>
									<td class="td_name">
										<span class="name_span1"><img src="{{f.1}}/{{f.2}}" width="50px"/></span>
										<span class="name_span2">{{f.3}}</span>
									</td>
									<td style="padding-top:20px;">{{f.4}}</td>
									<td style="padding-top:20px;">
										{% ifequal 1 f.5 %}男{% endifequal %}
										{% ifequal 2 f.5 %}女{% endifequal %}
									</td>
									<td style="padding-top:20px;">{{f.6}}</td>
									<td style="padding-top:20px;">
										<span><a href="{% url 'users:home' f.0 %}">查看</a>&nbsp;&nbsp;</span>
										<span id="focus{{f.0}}">
											{% ifequal 1 f.7 %}
											<font size="2">已关注</font>
											{% endifequal %}
											{% ifequal 2 f.7 %}
											<a href="javascript:void(0)" onclick="addfocus({{f.0}});">关注</a>
											{% endifequal %}
										</span>
									</td>
								</tr>
								{% endfor %}
							</tbody>
						</table>
					</div>


				</div>
				
			</div>
		</div>
</div>
	
	
	
	
	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
	
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="../../js/bootstrap.js"></script>
	<script src="../../js/message.js"></script>
	<script src="../../js/logout.js"></script>
	<script type="text/javascript">
				
		var xmlHttp; 

		function createXMLRequest(){
			if(window.ActiveXObject){
				xmlHttp=new ActiveXObject("Microsoft.XMLHttp");
			} else if(window.XMLHttpRequest){
				xmlHttp=new XMLHttpRequest();
			}
		}

		function cancelfocus(u_id){   
			createXMLRequest();                       
			var url="/users/cancelfocus/?u_id="+u_id;
			xmlHttp.open("GET",url);
			xmlHttp.onreadystatechange=function(){
				if(xmlHttp.readyState==4 && xmlHttp.status==200){
					if(xmlHttp.responseText==1){
						$("#cancel"+u_id).html('已取消关注');
					}
				}
			};
			xmlHttp.send(); 
		}
//添加关注
		function addfocus(u_id){   
			createXMLRequest();                       
			var url="/users/addfocus/?u_id="+u_id;
			xmlHttp.open("GET",url);
			xmlHttp.onreadystatechange=function(){
				if(xmlHttp.readyState==4 && xmlHttp.status==200){
					if(xmlHttp.responseText==1){
						$("#focus"+u_id).html('<font size="2">已关注</font>');
					}
				}
			};
			xmlHttp.send(); 
		}

	</script>
</body>
</html>